.pull-request-timeline {
    flex: 1 1 auto;
    align-self: stretch;
    padding: $tlp-spacing;
    border-left: 1px solid $tlp-ui-border-light;
    background-color: mix($tlp-theme-background-color, $tlp-ui-white, 50%);
    background-image: linear-gradient(to bottom, $tlp-ui-white, transparent 30%);

    @media screen and (max-width: 1200px) {
        margin: $tlp-spacing 0 0;
        border-top: 1px solid $tlp-ui-border-light;
        border-left: 0;
    }
}

#timeline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

.pull-request-no-comment {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    min-height: 200px;

    .empty-page-icon {
        display: block;
        margin: 0 0 10px;
        font-size: 60px;
    }
}

.pull-request-add-comment-form {
    display: flex;
    align-self: stretch;
    padding: $tlp-half-spacing;
    border: 1px solid $tlp-ui-border-normal;
    border-radius: 4px;
    background: $tlp-ui-white;
}

.pull-request-add-comment-area {
    flex: 1 1 auto;
    margin: 0 $tlp-half-spacing 0 0;

    > .tlp-textarea {
        height: 38px;

        &:focus {
            height: auto;
        }
    }
}

.pull-request-add-comment-button {
    height: auto;
}

.pull-request-timeline-loading {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 30px;
    margin: 0 0 $tlp-spacing;
    background: url('/themes/BurningParrot/images/spinner.gif') no-repeat center center;
}

.pull-request-event {
    $arrow-width: 6px;

    display: flex;
    align-items: center;
    width: 85%;
    margin: 0 0 $tlp-half-spacing;

    > .tlp-avatar {
        flex: 0 0 auto;
        margin: 0 calc(#{$tlp-half-spacing} + #{$arrow-width}) 0 0;
    }

    > .pull-request-event-content {
        position: relative;
        flex: 1;
        padding: $tlp-spacing;
        border: 1px solid $tlp-ui-border-normal;
        border-radius: 4px;
        background: $tlp-ui-white;

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 0;
            height: 0;
            transform: translate(-100%, -50%);
            border-width: 7px $arrow-width 7px 0;
            border-style: solid;
            border-color: transparent $tlp-theme-color transparent transparent;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: -1px;
            width: 4px;
            height: 100%;
            border-radius: 4px 0 0 4px;
            background: $tlp-theme-color;
        }

        > .pull-request-event-content-info {
            margin: 0 0 $tlp-half-spacing;
            font-size: 14px;
        }

        .pull-request-event-file-path {
            display: inline-block;
            margin: 0 0 5px;
            font-size: 14px;

            .fa-file-text-o {
                margin: 0 3px 0 0;
            }
        }
    }

    &.is-outdated > .pull-request-event-content {
        background: transparent;
    }

    &.is-outdated,
    &.timeline-event {
        > .pull-request-event-content {
            &::before {
                z-index: 2;
                border-color: transparent $tlp-ui-white transparent transparent;
            }

            &::after {
                z-index: 1;
                top: 50%;
                left: -1.5px;
                width: 0;
                height: 0;
                transform: translate(-100%, -50%);
                border-width: 7px $arrow-width 7px 0;
                border-style: solid;
                border-color: transparent $tlp-ui-border-normal transparent transparent;
                background: none;
            }

            p {
                color: $tlp-ui-dimmed;
                font-style: italic;
            }
        }
    }

    &:not(.from-pr-author) {
        align-self: flex-end;

        &.is-outdated,
        &.timeline-event {
            > .pull-request-event-content::before {
                border-color: transparent transparent transparent $tlp-ui-white;
            }

            > .pull-request-event-content::after {
                right: -1px;
                left: auto;
                transform: translate(100%, -50%);
                border-width: 7px 0 7px $arrow-width;
                border-color: transparent transparent transparent $tlp-ui-border-normal;
            }
        }

        &.is-outdated > .pull-request-event-content::before {
            border-color: transparent;
        }

        > .tlp-avatar {
            order: 2;
            margin: 0 0 0 calc(#{$tlp-half-spacing} + #{$arrow-width});
        }

        > .pull-request-event-content {
            &::before {
                left: 100%;
                transform: translate(0, -50%);
                border-width: 7px 0 7px $arrow-width;
                border-color: transparent transparent transparent $tlp-theme-color;
            }

            &::after {
                right: -1px;
                left: auto;
                border-radius: 0 4px 4px 0;
            }
        }
    }
}
